Se marcó como duplicado, pero la sugerencia de duplicación no es mi problema. Tengo que aplicar un sistema de filtro jquery simple en mi página. Está en una página dinámica que tiene botones para cada año. Hay una lista de participantes (tipo de publicación personalizada), y cada participante está registrado en un año. Entonces, por ejemplo, si hacemos clic en el botón "2018" que solo mostrará los participantes de ese año, lo mismo para 2019, 2020, etc.

El problema es: me gustaría incorporar la posibilidad de filtrar 2 años diferentes. Por ejemplo: si hacemos clic en el botón 2019 y 2020, me gustaría mostrar todas las tarjetas de los participantes de 2019 y también de los participantes de 2020.

¿Hay alguna forma (simple) de adaptar esto para aceptar múltiples botones activos y mostrar las tarjetas en consecuencia?

Aquí está el php y el código jquery:

Las Tarjetas (tienen la clase dinámica, usada para filtrar) :

 <div class="card default grid-model ed-<?php echo $theEdition; ?>" > <?php $theImage = get_field('image_a_la_une'); ?> <div class="image" style="background-image: url(<?php echo esc_url($theImage['url']); ?>);"></div> <div class="info"> <p class="year">Edition <?php echo $theEdition; ?></p> <h6 class="product-type main-info"><?php the_field('nom_du_projet'); ?></h6> <a class="link" href="<?php echo the_permalink(); ?>"></a> </div> </div>

Los botones de filtro (usando data-year para aplicar el filtro) :

 <?php foreach($categories as $category){ $theyear = $category->cat_name; $catcount = get_category($category->cat_ID)->category_count; echo '<div class="btn btn_transparent btn-year" data-year="ed-' . $theyear . '">' . $category->cat_name . '</div>'; } ?>

El jquery :

 $('.btn-year').on('click', function(){ $(this).addClass('active'); $('.btn-year').not(this).removeClass('active'); }); $('.btn-year').on('click', function(){ var value = $(this).attr('data-year'); if(value == "all"){ $('.card').show(); } else { $(".card").not("."+value).hide(); $(".card").filter("."+value).show(); } });